<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>何福海的个人网页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<style>
    /* 各个页面都会使用的公共样式 */
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 整个页面加背景图 */
    
    html,
    body {
        /* 当前 html 的父元素，就是浏览器窗口，此处的 100% 意思是 html 元素的高度和浏览器窗口一样高
    当前 body 的父元素，就是 html，此处的 100% 意思就是 html 多高，body，就多高 */
        height: 100%;
    }
    
    body {
        /* background-image: url(../image/squirrel.jpg); */
        background-color: orange;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    /* 导航栏 */
    
    .nav {
        width: 100%;
        height: 50px;
        background-color: rgba(51, 51, 51, 0.4);
        /* 透明度 alpha 是一个 0 - 1 之间的小数 */
        color: white;
        /* 导航栏内容的内容 都是一行排列的 使用 flex 布局进行操作 */
        display: flex;
        align-items: center;
        /* 实现子元素垂直居中 */
    }
    
    .nav img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 30px;
        /* 左右外边距 */
        margin-right: 10px;
    }
    /* 如何实现让元素,一个在左，一个在右?
1.CSS 里面有一个专门的操作 浮动 (float) 但是浮动有坑
2.如果只有两个元素 可以 space-between 如果是多个元素 就需要更复杂的 html 结构 包成 2 个元素
3.在左右中间 加入一个没有内容的空白元素 设置一个比较大的宽度 来进行占位 (更简单的办法 但是这个办法
不太利于"响应式布局"(自动适应不同宽度的浏览器) 索性咱们现在不必考虑这个事情 也就直接使用这个方案 */
    
    .nav .spacer {
        /* 相对于父元素的宽度 */
        width: 70%;
    }
    
    .nav a {
        color: white;
        text-decoration: none;
        /* 去下划线 */
        padding: 0 10px;
        /* 左右内边距 */
    }
    /* 这里是版心相关的样式 */
    
    .container {
        /* 版心不是和窗口一样宽的 */
        width: 1000px;
        /* 这个写法中 左右两侧必须有空格 不能没有(如果没有 可能无法被浏览器识别)
    这个 calc 是 CSS3 里面提供的一个内置的函数，平时看到的大部分的 CSS 都是 CSS2 这个标准中规定的，但是 CSS3 
    对 2 进行了一定的扩充，CSS3 现在也存在了很多年，主流的浏览器也都支持 */
        height: calc(100% - 50px);
        margin: 0 auto;
        /* 内边距 水平居中 */
        /* 对于 div 这样的块级元素 默认独占一行 如果需要让多个 div 在一行内排列 就需要使用弹性布局 */
        display: flex;
        justify-content: space-between;
        /* 让元素中间有一些等分的间隔 就是右边留的 5px */
    }
    /* 左侧样式 */
    
    .container .left {
        height: 100%;
        width: 200px;
        /* background-color: orange; */
    }
    /* 右侧样式 */
    
    .container .right {
        height: 100%;
        width: 795px;
        /* 左右之间留出   一点 */
        /* background-color: blueviolet; */
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
    }
    /* card 的样式 */
    
    .card {
        background-color: rgba(255, 255, 255, 0.8);
        /* 白色半透明 */
        border-radius: 10px;
        /* 通过这里的内边距 让头像居中 四个方向都是 30px */
        padding: 30px;
    }
    
    .card img {
        width: 140px;
        /* 左右留 30px */
        height: 140px;
        border-radius: 50%;
    }
    
    .card h3 {
        text-align: center;
        /* 居中对齐 */
        padding: 10px;
    }
    
    .card a {
        /* a 默认是行内元素 很多边距不生效 简单起见 直接设为块级元素 */
        display: block;
        text-align: center;
        text-decoration: none;
        color: #999;
        padding: 10px;
    }
    
    .card .counter {
        display: flex;
        justify-content: space-around;
        padding: 5px;
    }
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~列表样式~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* 博客列表相关的样式 */
    
    .blog {
        width: 100%;
        /* 高度不设置 让其取决于里面的内容高度综合 */
        padding: 20px;
    }
    
    .blog .title {
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        padding: 10px 0;
    }
    
    .blog .date {
        text-align: center;
        color: rgb(0, 128, 0);
        padding: 10px 0;
    }
    
    .blog .desc {
        text-indent: 2em;
        /* 缩进 */
    }
    
    .blog a {
        /* 设置成块级元素，方便设置尺寸和边距 */
        display: block;
        width: 140px;
        height: 40px;
        margin: 10px auto;
        /* 内边距 上方10px 水平居中 */
        border: 2px black solid;
        /* 边框 */
        color: black;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        /* 让悬停的变化过程柔和一些，加上过渡效果 */
        transition: all 0.3s;
    }
    /* 伪类选择器 鼠标悬停 */
    
    .blog a:hover {
        background-color: #333;
        color: white;
    }
</style>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/picture.jpg" alt="">
        <span>我的博客系统</span>

        <!-- 空白元素 用来占位 -->
        <div class="spacer"></div>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.list">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- .container 作为页面的版心 -->
    <!-- 这个部分是在页面中 水平居中对齐的 左右两侧会留出一定的边距 这个东西很多网站都有 称为"版心" -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 整个用户信息区 -->
            <div class="card">
                <img src="image/picture.jpg" alt="">
                <h3>小何的博客</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容详情 -->
        <div class="right">
            <!-- .blog 对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-06-10 15:00:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    从今天起，我要认真写博客，Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit fugit libero deleniti a distinctio exercitationem mollitia adipisci repudiandae aliquid reiciendis, quae consequatur laboriosam illum et dicta iure, error eligendi iusto?
                </div>
                <!-- ">>" 转义 -->
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-06-12 15:00:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    从今天起，我要认真写博客，Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit fugit libero deleniti a distinctio exercitationem mollitia adipisci repudiandae aliquid reiciendis, quae consequatur laboriosam illum et dicta iure, error eligendi iusto?
                </div>
                <!-- ">>" 转义 -->
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>

</body>

</html>